<template>
  <div class="all" :class="isZiliao === true ? 'backFFF' : ''">
    <!--     评估-->
    <header v-show="isZiliao === false">
      <div class="div" @click="back">
        <img src="../../assets/返回.png" alt="">
        <span class="side">返回</span>
      </div>
      <div class="div">
        <span>评估量表填写</span>
      </div>
      <div class="div">
        <span class="side" @click="send" v-show="arr.isSend !== true">完成</span>
      </div>
    </header>
    <!--    资料上传-->
    <header v-show="isZiliao === true">
      <div class="div" @click="zlBack">
        <img src="../../assets/返回.png" alt="">
        <span class="side">返回</span>
      </div>
      <div class="div">
        <span>评估相关资料</span>
      </div>
      <div class="div">
        <span class="side" @click="Shangchuan()" v-show="arr.isSend !== true">上传</span>
      </div>
    </header>
    <!--    评估-->
    <div v-show="isZiliao === false">
      <div  class="title">
        <p>{{arr.ASSESS_NAME}}</p>
        <p style="justify-content: space-between">
          <button @click.stop="clickNodoing()">
            <img src="../../assets/量表说明@2x.png" alt="">
            量表说明
          </button>
          <span style="font-size: 14px;margin-left: 10px">
            评定总分:
            <a class="solt" v-if="ALL_POINTS !== undefined">{{ALL_POINTS}}</a>
            <a class="solt" v-else>0</a>分
          </span>
          <button class="checkBtn" @click="listShow = !listShow">
            <img src="../../assets/已选中量表列表@2x.png" alt="">
            复评列表
          </button>
        </p>
      </div>
      <div  class="content">
        <van-loading size="24px" style="color: #1da4f2" vertical v-show="isLoading === true">加载中...</van-loading>
        <ul v-for="(item, index) in arr.subjects" :key="index" >
          <li class="liHeader" @click="lookHis(item)">
            <p style="text-decoration: underline;color: #1da4f2">{{index+1}}、{{item.SUBJECT_NAME}}</p>
            <p class="p_btn">
              <button @click.stop="clickZL(item)" v-if="item.isSendFile !== true">资料上传</button>
              <button @click.stop="clickZL(item)" style="background: rgba(29, 164, 242, 0.1);color: #1da4f2" v-else>资料已上传</button>
              <img :disabled="item.isSend" @click.stop="clickNodoing()" src="../../assets/帮助小@2x.png" alt="">
            </p>
          </li>
          <li class="liChoos"
              v-for="(chooseItem, chooseIndex) in item.chooses"
              :key="chooseIndex"
              @click="clickChoose(item.chooses, chooseItem, item)" :style="{'color' : (chooseItem.oldSelect == true ? '#e3170d' : '#333')}">
            <img
              class="selectBtn" :src="[chooseItem.select === true ? require('../../assets/题目选择.png') : require('../../assets/题目未选择.png')]"
              alt="">
<!--             : chooseItem.oldSelect == true ? require('../../assets/选中红.png')-->
            {{chooseItem.CHOOSE_NAME}} ({{chooseItem.POINTS}}分)
          </li>
        </ul>
      </div>
      <div  class="bottom">
<!--        <ul>-->
<!--          <li>综合评估</li>-->
<!--          <li style="text-align: left" v-show="ALL_POINTS !== undefined">-->
<!--            {{ALL_POINTS}}分-->
<!--          </li>-->
<!--        </ul>-->
        <ul>
          <li>*评定结果</li>
          <li>
            <textarea v-model="result"></textarea>
            <p>小提示：结果可编辑</p>
          </li>
        </ul>
      </div>
    </div>
    <!-- 资料上传 -->

    <div v-show="isZiliao === true"  class="zlMenu" @click="showPicker = true">
      <div>
        <a></a>
        <span>针对项目</span>
      </div>
      <div style="width: 70%">
        <span style="
margin-right: 8px;
font-size: 15px;
font-family: PingFang SC;
font-weight: 500;
color: #999999;
display: inline-block;
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow:ellipsis;
text-align: right
"
        >{{zhenDuiName}}</span>
        <img src="../../assets/下弹灰@2x.png" v-show="showPicker === false" alt="">
        <img src="../../assets/上弹灰@2x.png" v-show="showPicker === true" alt="">
      </div>
    </div>
<!--    <van-action-sheet v-model="showPicker"-->
<!--                      :actions="actions"-->
<!--                      @select="onSelect" />-->
    <div v-show="isZiliao === true">
      <div  @click="PlayVideo"  class="video">
<!--        <div class="videoMenu">-->
<!--          <li class="videoMenu_left">-->
<!--            <a></a>-->
<!--            <span>上传影像资料</span>-->
<!--          </li>-->
<!--          <li>-->
<!--            {{fileList.length}}/1-->
<!--          </li>-->
<!--        </div>-->
        <div class="videoUpload">
          <van-uploader v-model="fileList"
                        :upload-icon="require('../../assets/视频上传.png')"
                        multiple
                        @delete="DelVideo"
                        accept="video/*, .mp4"
                        :after-read="afterRead"
                        :max-count="1" />
        </div>
      </div>
      <div class="IMG">
        <div class="imgMenu">
          <li class="imgMenu_left">
            <a></a>
            <span>上传图片资料</span>
          </li>
          <li>
            不限
          </li>
        </div>
        <div class="videoUpload">
          <van-uploader v-model="ImgfileList"
                        :upload-icon="require('../../assets/上传图片.png')"
                        multiple
                        :after-read="updateFile"
          />
        </div>
      </div>
    </div>
    <van-overlay :show="showPicker">
      <div class="wrapper" @click.stop>
        <div class="block" >
          <p class="pHeader">请选择针对的项目</p>
          <ul>
            <li v-for="(item, index) in actions" :key="index" @click="onSelect(item)">
              <span class="yuan"></span>
              <a v-show="index === 0">评定项目：{{item.name}}</a>
              <a v-show="index === 1">{{item.name}} : {{arr.ASSESS_NAME}}</a>
            </li>
          </ul>
        </div>
      </div>
    </van-overlay>
    <div v-show="isZiliao === true"  class="zlTitle">
      <div class="label">
        <a class="hengGang"></a>
        <span>情况说明</span>
      </div>
      <li class="textareaDiv">
        <textarea v-model="desc" maxlength="100"></textarea>
        <span class="shuoming">限100字以内</span>
      </li>
      <!--      <li>-->
      <!--        <span>情况</span>-->
      <!--        <span>说明</span>-->
      <!--      </li>-->
      <!--      <li>-->
      <!--        <textarea v-model="desc"></textarea>-->
      <!--      </li>-->
    </div>
    <van-dialog v-model="isPop"
                width="80%"
                title="是否确认提交"
                @confirm.once="onConfirm()"
                @cancel="onCancel()"
                confirmButtonColor="#1da4f2"
                show-cancel-button>
    </van-dialog>
    <v-touch v-on:swipeleft="onSwipeLeft" v-on:swiperight="onSwipeRight" >
      <van-popup class="pop" v-model="listShow" position="left" style="border-radius: 0 10px 10px 0" :style="{ width: '80%', height: '100%' }" >
        <v-touch v-on:swipeleft="onSwipeLeft" v-on:swiperight="onSwipeRight" >
          <ul>
            <li  v-for="(item, index) in pingGuLists" @click="clickLi(index)" :key="index">
              <div class="pop_img">
                <img src="../../assets/评估量表小@2x.png" alt="">
              </div>
              <div class="popLi">
                <div class="popLi_top">
                <span class="">
                {{item.name}}
                </span>
                <span class="popTime">
                 评定时间：{{item.time}}
                </span>
                </div>
                <div class="popLi_bottom">
                  <span class="popName">评定人员：{{item.OP_NICK_NAME}}</span>
                  <span class="tag" style=" background: rgba(29, 164, 242, 0.1);color: #1DA4F2"
                        v-if="item.ACCEPT_USER_ID === item.OP_USER_ID">自</span>
                  <span class="tag" v-else style=" background: rgba(46, 196, 155, 0.1);color: #2EC49B;">他</span>
                </div>
              </div>
<!--              <div class="jiaoBiao jiaoBiao2" v-if="item.isSend === true">-->
<!--                <a class="dian dian2"></a>-->
<!--                <a>已完成</a>-->
<!--              </div>-->
<!--              <div class="jiaoBiao jiaoBiao1"  v-else>-->
<!--                <a class="dian dian1"></a>-->
<!--                <a>未完成</a>-->
<!--              </div>-->
            </li>
          </ul>
        </v-touch>
      </van-popup>
    </v-touch>
    <!--     结果预览-->
    <van-popup v-model="tableShow"
               round
               :close-on-click-overlay="true"
               position="bottom"
               :style="{ height: '80%', bottom: '50px' }">
      <div class="tab">
        <div class="tabHeader">
          <div class="solt" style="margin-left:15px" @click="tableShow = false">返回</div>
          <div>评定量表结果预览</div>
          <div class="solt"  @click="tabResultLook()">签字确认</div>
<!--          <div class="solt"-->
<!--               v-else-->
<!--               @click="tabResultLook()"-->
<!--          >提交</div>-->
        </div>
        <div class="tabTitle">
          {{arr.ASSESS_NAME}}
        </div>
        <div class="tabPerson">
          <p class="tabName">
            <span>姓名：{{peopleList.name}}</span>
            <span>性别：
              <a v-if="peopleList.sex == 1">男</a>
              <a v-else-if="peopleList.sex == 2">女</a>
            </span>
            <span>年龄：{{peopleList.age}}</span>
          </p>
          <p>联系电话：{{peopleList.phone}}</p>
          <p>初步诊断：{{firstArr.DIAGNOSE}}</p>
          <p>联系地址：{{peopleList.zuizhongAddress}}</p>
          <p>评定总分：{{tableList.ALL_POINTS}}分</p>
<!--          居家自评      居家非专业医疗人士评定    居家专业医疗人士评定              -->
          <p>评定来源：{{
              Number(firstArr.ASSESS_TYPE) === 1 ? '门诊专业评定' :
              Number(firstArr.ASSESS_TYPE) === 2 ? '住院专业评定' :
              Number(firstArr.ASSESS_TYPE) === 3 ? '居家自评' :
              Number(firstArr.ASSESS_TYPE) === 4 ? '居家非专业医疗人士评定' :
              Number(firstArr.ASSESS_TYPE) === 5 ? '居家专业医疗人士评定' :
                ''
            }}</p>
          <p>评定日期：{{todayDate}}</p>
          <p>评定结果</p>
          <div class="tabTextarea">
            <textarea name="" v-model="tableList.result" readonly id="" cols="30" rows="10"></textarea>
          </div>
          <p>评定人员： {{selfInformation.name}}</p>
        </div>
        <div class="label" style="margin-top: 5px;margin-bottom: 5px">
          <a class="hengGang"></a>评定项目及评定项目结果
        </div>
        <div class="tabContent">
          <ul v-for="(item, index) in tableList.subjects" :key="index">
            <li class="liHeader">
              <p>{{index+1}}、{{item.SUBJECT_NAME}}</p>
              <p class="p_btn"></p>
            </li>
            <li class="liChoos"
                v-for="(chooseItem, chooseIndex) in item.chooses"
                :key="chooseIndex"
            >
              <img
                class="selectBtn" :src="[chooseItem.select === true ? require('../../assets/题目选择.png') : require('../../assets/题目未选择.png')]"
                alt="">
              {{chooseItem.CHOOSE_NAME}} ({{chooseItem.POINTS}}分)
            </li>
          </ul>
        </div>
      </div>
    </van-popup>
<!--    <van-popup v-model="tableShow"
               round
               :close-on-click-overlay="true"
               position="bottom"
               :style="{ height: '80%', bottom: '50px' }">
      <div class="tabTop">
        <div class="tabHeader">
          <div style="margin-left:15px" @click="tableShow = false">关闭</div>
          <div>结果预览</div>
          <div class="solt" @click="tabResultLook">提交</div>
        </div>
        <div class="tabTitle">
          {{arr.ASSESS_NAME}}
        </div>
        <div>
          <table style="width: 100%"
                 border="0"
                 cellspacing="0"
                 cellpadding="0">
            <thead>
            <tr style="color: white;background: #1DA4F2">
              <th>序号</th>
              <th>评定项</th>
              <th>评估评定项结果</th>
              <th>得分</th>
            </tr>
            <tr style="color: #1DA4F2;background: rgba(229, 229, 229, 0.5)">
              <td>0</td>
              <td>综合评定</td>
              <td style="white-space:normal;word-break:break-all;word-wrap: break-word;">{{tableList.result}}</td>
              <td>{{tableList.ALL_POINTS}}
                <span v-show="Number(tableList.ALL_POINTS) > 0">分</span>
              </td>
            </tr>
            </thead>
          </table>
        </div>
      </div>
      <div>
        <table style="width: 100%;" border="0" cellspacing="0" cellpadding="0">
          <tbody>
&lt;!&ndash;          <tr v-for="(item, index) in tableList.chooses" :key="index">&ndash;&gt;
&lt;!&ndash;            <td>{{index + 1}}</td>&ndash;&gt;
&lt;!&ndash;            <td>{{item.SUBJECT_NAME}}</td>&ndash;&gt;
&lt;!&ndash;            <td >{{item.CHOOSE_NAME}}</td>&ndash;&gt;
&lt;!&ndash;            <td>{{item.POINTS}}<span v-show="Number(item.POINTS) > 0">分</span></td>&ndash;&gt;
&lt;!&ndash;          </tr>&ndash;&gt;
            <tr v-for="(item, index) in tableList.subjects" :key="index">
              <td>{{index + 1}}</td>
              <td>{{item.SUBJECT_NAME}}</td>
              <td >
                <span v-for="(choosesItem, choosesIndex) in item.chooses" :key="choosesIndex" v-if="choosesItem.select === true">{{choosesItem.CHOOSE_NAME}}</span>
              </td>
              <td>
                  <span v-for="(choosesItem, choosesIndex) in item.chooses" :key="choosesIndex" v-if="choosesItem.select === true">
                    {{choosesItem.POINTS}}<span v-show="Number(choosesItem.POINTS) > 0">分</span>
                  </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </van-popup>-->
    <van-popup   v-model="writeShow"
                 :close-on-click-overlay="false"
                 position="bottom"
                 :style="{ height: '80%', bottom: '50px' }">
      <div class="tabHeader">
        <div @click="writeShow = false" class="solt" style="margin-left: 15px">返回</div>
        <div>签名</div>
        <div class="solt" ></div>
      </div>
      <div class="label">
        <a class="hengGang"></a>
        <span>请手写签名</span>
      </div>
      <div class="writeDiv" :style="{height: '70%', overflow: 'hidden'}">
        <vue-esign ref="esign" style="background: #1da4f2"
                   :width="800"
                   :height="2000"
                   :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" />
      </div>
      <div class="writeButton">
        <button @click="handleReset()">清除</button>
        <button class="backBlue" @click="handleGenerate()"> 确认</button>
      </div>
    </van-popup>

    <!--     选医生-->
    <van-popup
      v-model="doctorShow"
      round
      :close-on-click-overlay="false"
      position="bottom"
      :style="{ height: '80%', bottom: '50px' }">
      <div class="popDiv" ref="box">
        <div class="popHeader" style="padding: 0 10px;box-sizing:border-box;">
            <span @click="doctorShow=false" style="width: 30%;">
              取消
            </span>
            <span style="width: 40%;display: flex;
              justify-content: center;">
              请选择医生
              </span>
            <span @click="getSubmit" style="width: 30%;color:#1DA4F2;display: flex;justify-content: flex-end">
              确定
            </span>
        </div>
        <div class="box"
             @click="select_doc_ID = item.USER_ID"
             :class="select_doc_ID == item.USER_ID ? 'selectDoctor' : ''"
             v-for="(item, index) in doctorsList" :key="index">
          <div class="box_left">
            <img v-if="item.PHOTO" :src="item.PHOTO" class="PHOTO" alt="">
            <img v-else src="../../assets/男医生@2x.png" class="PHOTO" alt="">
          </div>
          <div class="box_right">
            <ul>
              <li>
            <span class="name">
              <span style="font-weight: bold;font-size: 15px">{{item.NICK_NAME}}</span>
              <span>|</span>
              <span style="font-weight: 500;font-size: 13px !important;">{{item.MAJOR}}</span>
              <span>|</span>
              <span style="font-weight: 500;font-size: 13px !important;">{{item.DEPART}}</span>
            </span>
              </li>
              <li>
                <span class="jieShao">{{item.HOSPITAL_NAME}}</span>
                <button class="biaoqian" v-if="item.GRADE">{{item.GRADE}}</button>
              </li>
            </ul>
            <div class="box_rigth_bottom">
              <p>
                <a >接诊率:</a><span>{{item.jiezhenCount}}</span>
                <a >好评率:</a><span>{{item.haopingLv}}</span>
                <a >咨询量:</a><span>{{item.zixunCount}}</span>
              </p>
              <p class="goodAt">
                <a style="display: block">擅长:</a>
                <span>{{item.Goodat}}</span>
              </p>
              <p>
                <a >最快回复:</a>
                <span style="color: #1DA4F2"  v-if="item.min !== undefined && item.min !== null && item.min !== ''">{{item.min}}</span>
                <span v-else style="color: #999999">暂无</span>
                <a >平均回复:</a>
                <span style="color: #1DA4F2" v-if="item.avg !== undefined && item.avg !== null && item.avg !== ''">{{item.avg}}</span>
                <span style="color: #999999" v-else>暂无</span>
              </p>
            </div>
          </div>
        </div>
<!--        <van-loading v-show="isLoading" size="24px" style="width: 100%;height: 80%;-->
<!--    display:flex;align-items:center;justify-content:center; color: #1da4f2" vertical>-->
<!--          加载中...-->
<!--        </van-loading>-->
<!--        <van-empty-->
<!--          style="width: 100%;height: 60%"-->
<!--          v-show="((tabBarIndex == 0 && doctorsList.length <= 0) || (tabBarIndex == 1 && teamList.length <= 0)) && isLoading === false"-->
<!--          class="custom-image"-->
<!--          :image="require('../../assets/空两本书.png')"-->
<!--          :description=" `暂无`+typeText"-->
<!--        />-->
      </div>
    </van-popup>
  </div>
</template>

<script>
import $ from 'jquery'
import {Toast} from 'vant'
import lrz from 'lrz'
export default {
  name: 'Copy',
  data () {
    return {
      isLoading: true,
      showPicker: false,
      actions: [], // 针对项目包含内容
      zhenDuiName: '',
      fileList: [], // 视频存储
      videoList: [], // 视频返回后存储
      ImgfileList: [], // 图片存储
      imgList: [], // 图片返回后存储
      isZiliao: false, // 是否是资料页面
      isPop: false, // 审核弹窗
      pingGuLists: [], // 已评估过量表
      listShow: false, // 已评估过量表列表展示
      type: 0,
      assessid: '',
      ID: '',
      list: [],
      listAll: [],
      ListIndex: 0, // 已选中量表所处表位置
      arr: [], // 当前选中量表的题目
      ALL_POINTS: 0, // 当前量表选中后的总分
      result: '', // 当前量表的评估结果
      answers: [], // 封装的提交 已选择的
      ACCEPT_USER_ID: '',
      nowItem: '', // 当前点击的题目
      desc: '', // 上传图片里面的说明
      imgSend: true,
      id: '',
      tableShow: false,
      returnID: '',
      tableList: [],
      // 签字数据
      writeShow: false,
      lineWidth: 6,
      lineColor: '#000000',
      bgColor: '',
      isCrop: false,
      height: 0,
      sign_url: '', // 签名地址
      peopleList: [],
      firstArr: [],
      team_id: '',
      userid: this.$route.query.userid,
      doctorShow: false,
      doctorsList: [], // 医生团队是否有分支
      select_doc_ID: ''
    }
  },
  mounted () {
    if (window.sessionStorage.getItem('ACCEPT_USER_ID') !== null && window.sessionStorage.getItem('ACCEPT_USER_ID') !== undefined) {
      this.ACCEPT_USER_ID = sessionStorage.getItem('ACCEPT_USER_ID')
    }
    this.id = this.$utils.getUrlKey('ID')
    this.assessid = this.$utils.getUrlKey('assessid')
    $('.content').css('height', $(window).height() - $('.content').offset().top - $('.bottom').outerHeight() - 50 + 'px')
    this.getList()
    // 获取个人基本信息
    this.getPerson()
  },
  computed: {
    // 当前日期
    todayDate: function () {
      return new Date().getFullYear() + '年' + Number(new Date().getMonth() + 1) + '月' + new Date().getDate() + '日'
    },
    // 登录者信息
    selfInformation: function () {
      return JSON.parse(sessionStorage.getItem('selfInformation'))
    },
    writeHeight: function () {
      let height = 0
      height = $(window).height() - 100
      return height
    }
  },
  methods: {
    // 获取是否有团队分支
    getFenzhiDoctor () {
      this.$http.findDoctor({team_id: this.team_id, team_assesschain_pid: this.userid})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.doctorsList = res.data.data
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    // 获取个人基本信息
    getPerson () {
      this.$http.findUserXinXiTuoMin({'data_user_id': this.ACCEPT_USER_ID})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.peopleList = res.data.data
            console.log(this.peopleList)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    clickNodoing () {
      Toast('暂无说明')
    },
    // 清空画布
    handleReset () {
      this.$refs.esign.reset()
    },
    // 生成图片
    handleGenerate () {
      this.$refs.esign.generate().then(res => {
        this.$http.imgUpload({base64: res})
          .then(res => {
            console.log(res)
            if (res.data.status === 'success') {
              this.writeShow = false
              this.sign_url = res.data.data.url
              this.$set(this.arr, 'sign_url', this.sign_url)
              // if (this.doctorsList.length > 0) {
              //   this.doctorShow = true
              // } else {
              //   this.getSubmit()
              // }
              this.getSubmit()
            }
          })
          .catch(err => {
            console.log(err)
          })
      }).catch(err => {
        console.log(err)
        Toast('请签字确认') // 画布没有签字时会执行这里 'Not Signned'
      })
    },
    // 删除视频
    DelVideo (file, detail) {
      this.fileList = [] // 视频存储
      this.videoList = [] // 视频返回后存储
    },
    lookHis (item) {
      console.log(item)
      this.$router.push({path: '/copyXinxi', query: {title: item.SUBJECT_NAME, ID: this.$route.query.ID, SUBJECT_ID: item.ID}})
    },
    clickLi (index) {
      this.ListIndex = index
      let nowArr = JSON.stringify(this.listAll[index])
      this.arr = JSON.parse(nowArr)
      this.listShow = !this.listShow

      // 旧的显示红色
      let _this = this
      this.arr.subjects.forEach(function (cunt, index, data) {
        cunt.chooses.forEach(function (childenCunt, childenIndex, childenData) {
          if (childenCunt.select == true) {
            _this.$set(childenCunt, 'oldSelect', true)
          }
        })
      })

      if (this.arr.zongFen !== undefined) {
        this.ALL_POINTS = this.arr.zongFen
      } else {
        this.ALL_POINTS = 0
      }
    },
    onSwipeLeft () { // 左滑动
      // Toast('左滑')
      this.listShow = false
    },
    onSwipeRight () { // 右滑动
      Toast('右滑')
    },
    // 播放视频
    PlayVideo () {
      if (this.videoList.length > 0) {
        // console.log(this.videoList)
        window.location.href = this.videoList
      }
    },
    // 点击针对项目
    onSelect (item) {
      this.desc = '' // 图片说明
      this.fileList = [] // 视频存储
      this.videoList = [] // 视频返回后存储
      this.ImgfileList = [] // 图片存储
      this.imgList = [] // 图片返回后存储
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      var _this = this
      if (item.name === '整体量表') {
        // 如果存过整体图片
        if (this.arr.FILES !== undefined && this.arr.FILES.length > 0) {
          // 整体图片循环
          this.arr.FILES.forEach(function (currentValue, index, arr) {
            if (Number(currentValue.type) === 1) {
              var obj = {
                url: currentValue.url,
                isImage: true
              }
              // 当前后台返回的图片
              _this.imgList.push(currentValue.url)
              // 当前图片存储
              _this.ImgfileList.push(obj)
            } else if (Number(currentValue.type) === 2) {
              _this.fileList.push(currentValue.url)
              _this.videoList = currentValue.url
            }
          })
        } else { // 整体量表没有文件
          this.desc = '' // 图片说明
          this.fileList = [] // 视频存储
          this.videoList = [] // 视频返回后存储
          this.ImgfileList = [] // 图片存储
          this.imgList = [] // 图片返回后存储
        }
        // // 存过情况说明
        if (this.arr.DESC !== undefined && this.arr.DESC !== null) {
          this.desc = this.arr.DESC
        }
      } else {
        // 选小题
        // 如果存过图片
        if (this.nowItem.tupians !== undefined && this.nowItem.tupians.length > 0) {
          this.nowItem.tupians.forEach(function (currentValue, index, arr) {
            if (Number(currentValue.type) === 1) {
              var obj = {
                url: currentValue.url,
                isImage: true
              }
              // 当前后台返回的图片
              _this.imgList.push(currentValue.url)
              // 当前图片存储
              _this.ImgfileList.push(obj)
            } else if (Number(currentValue.type) === 2) {
              _this.fileList.push(currentValue.url)
              _this.videoList = currentValue.url
            }
          })
        }
        // 存过情况说明
        if (this.nowItem.desc !== undefined && this.nowItem.desc !== null) {
          this.desc = this.nowItem.desc
        }
      }
      this.showPicker = false
      this.zhenDuiName = item.name
    },
    // 点击上传
    Shangchuan () {
      if (this.desc !== '' || this.fileList.length > 0 || this.ImgfileList.length > 0) {
        // 整体量表存储
        if (this.imgSend === true && this.zhenDuiName === '整体量表') { // 整体上传资料
          document.title = '评估量表填写'
          var FILES = []
          if (this.ImgfileList.length > 0) {
            // 当前题目加一个 tupians属性
            this.imgList.forEach(function (currentValue, index, arr) {
              var obj = {
                type: '1',
                url: currentValue
              }
              FILES.push(obj)
            })
          }
          var att = {
            type: '2',
            url: this.videoList
          }
          if (this.fileList.length > 0) {
            FILES.push(att)
          }
          if (this.fileList.length > 0 || this.ImgfileList.length > 0) {
            this.arr.FILES = FILES
          }
          // 当前题目加一个 desc属性 情况详情描述
          this.arr.DESC = this.desc
          // // 是否有图片上传 或 选择过
          // this.nowItem.isSel = true
          // // 是否传过图片或视频
          // this.nowItem.isSendFile = true
          this.nowItem = '' // 当前item
          this.imgList = []
          this.ImgfileList = []
          this.isZiliao = false // 资料关闭按钮
          this.actions = [] // 针对项目所有选项
          this.zhenDuiName = '' // 针对项目为空
        } else if (this.imgSend === true) { // 小题上传资料
          document.title = '评估量表填写'
          var tupians = []
          if (this.ImgfileList.length > 0) {
            // 当前题目加一个 tupians属性
            this.imgList.forEach(function (currentValue, index, arr) {
              var obj = {
                type: '1',
                url: currentValue
              }
              tupians.push(obj)
            })
          }
          // eslint-disable-next-line no-redeclare
          var att = {
            type: '2',
            url: this.videoList
          }
          if (this.fileList.length > 0) {
            tupians.push(att)
          }
          if (this.fileList.length > 0 || this.ImgfileList.length > 0) {
            this.nowItem.tupians = tupians
          }
          // 当前题目加一个 desc属性 情况详情描述
          this.nowItem.desc = this.desc
          // 是否有图片上传 或 选择过
          this.nowItem.isSel = true
          // 是否传过图片或视频
          this.nowItem.isSendFile = true
          console.log(this.nowItem)
          this.nowItem = '' // 当前item
          this.imgList = []
          this.ImgfileList = []
          this.isZiliao = false // 资料关闭按钮
          this.actions = [] // 针对项目所有选项
          this.zhenDuiName = '' // 针对项目为空
          window.sessionStorage['isZiliao'] = this.isZiliao
        } else {
          Toast('视频或图片正在压缩中，请稍后')
        }
      } else {
        Toast('内容空空如也不能提交哦')
      }
    },
    // 点击资料返回
    zlBack () {
      // document.title = '评估量表填写'
      // this.nowItem = ''
      // this.desc = ''
      // this.imgList = []
      // this.ImgfileList = []
      // this.isZiliao = false
      // this.fileList = []
      // this.videoList = []
      document.title = '评估量表填写' // 网址title
      this.nowItem = '' // 当前的item
      this.desc = '' // 当前情况说明
      this.imgList = [] // 当前图片存储
      this.ImgfileList = [] // 当前图片显示存储
      this.isZiliao = false // 资料关闭按钮
      this.fileList = [] // 当前视频显示存储
      this.videoList = [] // 当前视频存储
      this.actions = [] // 针对项目所有选项
      this.zhenDuiName = '' // 针对项目为空
    },
    // 点击资料
    clickZL (item) {
      var NameObj = {
        name: item.SUBJECT_NAME
      }
      this.actions.push(NameObj)
      var allName = {
        name: '整体量表'
      }
      this.actions.push(allName)
      this.zhenDuiName = item.SUBJECT_NAME
      document.title = '评估相关资料'
      var _this = this
      this.nowItem = item
      this.desc = ''
      this.imgList = []
      this.ImgfileList = []
      this.fileList = []
      this.videoList = []
      if (this.zhenDuiName === '整体量表') {
        if (this.arr.DESC !== undefined && this.arr.DESC !== null) {
          this.desc = this.arr.DESC
        }
        // 如果存过图片
        if (this.FILES !== undefined && this.FILES.length > 0) {
          this.FILES.forEach(function (currentValue, index, arr) {
            if (Number(currentValue.type) === 1) {
              var obj = {
                url: currentValue.url,
                isImage: true
              }
              // 当前后台返回的图片
              _this.imgList.push(currentValue.url)
              // 当前图片存储
              _this.ImgfileList.push(obj)
            } else if (Number(currentValue.type) === 2) {
              _this.fileList.push(currentValue.url)
              _this.videoList = currentValue.url
            }
          })
        }
      } else {
        if (item.desc !== undefined && item.desc !== null) {
          this.desc = item.desc
        }
        // 如果存过图片
        if (item.tupians !== undefined && item.tupians.length > 0) {
          item.tupians.forEach(function (currentValue, index, arr) {
            if (Number(currentValue.type) === 1) {
              var obj = {
                url: currentValue.url,
                isImage: true
              }
              // 当前后台返回的图片
              _this.imgList.push(currentValue.url)
              // 当前图片存储
              _this.ImgfileList.push(obj)
            } else if (Number(currentValue.type) === 2) {
              _this.fileList.push(currentValue.url)
              _this.videoList = currentValue.url
            }
          })
        }
      }
      this.isZiliao = true
    },
    // 图片上传之后
    updateFile (file) {
      this.fileUpload(file, 0)
    },
    // 上传图片请求操作
    fileUpload (file, i) {
      if (file.length === undefined) {
        this.imgSend = false
        file.status = 'uploading'
        file.message = '正在压缩中...'
        lrz(file.file, {
          width: 2000,
          quality: 0.7 // 图片压缩质量，取值0-1，默认为0.7
        })
          .then((rst) => {
            this.$http.imgUpload({base64: rst.base64})
              .then(res => {
                console.log(res)
                if (res.data.status === 'success') {
                  this.imgList.push(res.data.data.url)
                  this.imgSend = true
                  file.status = ''
                  file.message = ''
                }
              })
              .catch(err => {
                console.log(err)
              })
          })
          .catch((error) => {
            console.log('失败', error)
            // this.fileUpload(file[i].content, file, i)
            // 失败时执行
          })
      } else {
        if (i === file.length) {
          this.imgSend = true
          return false
        }
        this.imgSend = false
        if (i === 0) {
          for (var j = 0; j < file.length; j++) {
            file[j].status = 'uploading'
            file[j].message = '正在压缩中...'
          }
        }
        lrz(file[i].file, {
          width: 2000,
          quality: 0.7 // 图片压缩质量，取值0-1，默认为0.7
        })
          .then((rst) => {
            this.$http.imgUpload({base64: rst.base64})
              .then(res => {
                console.log(res)
                if (res.data.status === 'success') {
                  this.imgList.push(res.data.data.url)
                  file[i].status = ''
                  file[i].message = ''
                  i++
                  this.fileUpload(file, i)
                }
              })
              .catch(err => {
                console.log(err)
              })
          })
          .catch((error) => {
            console.log('失败', error)
          })
      }
    },
    // 视频上传
    afterRead (file) {
      file.status = 'uploading'
      file.message = '正在压缩中...'
      this.imgSend = false
      this.$http.videoUpload({base64: file.content})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            file.status = ''
            file.message = ''
            this.imgSend = true
            this.videoList = res.data.data.url
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 选择题目
    clickChoose (choose, chooseitem, item) {
      var _that = this
      item.chooses.forEach(function (currentValue, index, arr) {
        // 当前的等于遍历的
        if (currentValue.ID === chooseitem.ID) {
          // 选择过
          if (currentValue.select === true) {
            _that.$set(currentValue, 'select', false)
            _that.ALL_POINTS -= currentValue.POINTS
            _that.$set(_that.arr, 'ALL_POINTS', _that.ALL_POINTS)
            _that.$set(item, 'isSel', false)
          } else { // 未选择过
            _that.$set(currentValue, 'select', true)
            _that.ALL_POINTS += currentValue.POINTS
            _that.$set(_that.arr, 'ALL_POINTS', _that.ALL_POINTS)
            _that.$set(item, 'isSel', true)
          }
        } else { // 当前的不等于遍历的
          // 如果选择过
          if (currentValue.select === true) {
            _that.$set(currentValue, 'select', false)
            _that.ALL_POINTS -= currentValue.POINTS
            _that.$set(_that.arr, 'ALL_POINTS', _that.ALL_POINTS)
          }
        }
      })
      // this.getResult(item.ID, _that.ALL_POINTS)
    },
    // 根据评估表ID和分数获取评估结果
    getResult (id, allPoints) {
      this.$http.getResult({'ASSESS_ID': id, 'ALL_POINTS': allPoints})
        .then(res => {
          // console.log(res)
          this.result = res.data.RESULT
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 获取已评估过的题目
    getList () {
      this.$http.getMyAssessAndAnswers({'ID': this.id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.team_id = res.data.data[0].TEAM_ID
            this.getFenzhiDoctor()
            var _this = this
            res.data.data.forEach(function (current, index, arr) {
              var obj
              if (index === 0) {
                obj = {
                  name: '首评',
                  time: current.CREATED_AT,
                  OP_NICK_NAME: current.OP_NICK_NAME,
                  ACCEPT_USER_ID: current.ACCEPT_USER_ID,
                  OP_USER_ID: current.OP_USER_ID
                }
              } else {
                obj = {
                  name: '复评' + index,
                  time: current.CREATED_AT,
                  OP_NICK_NAME: current.OP_NICK_NAME,
                  ACCEPT_USER_ID: current.ACCEPT_USER_ID,
                  OP_USER_ID: current.OP_USER_ID
                }
              }
              _this.pingGuLists.push(obj)
            })
            this.listAll = res.data.data

            // 防止直接更改列表选中项
            let nowArr = JSON.stringify(this.listAll)
            this.type = JSON.parse(nowArr).TYPE
            this.arr = JSON.parse(nowArr)[0]
            this.firstArr = JSON.parse(nowArr)[0]

            // 区分 以前别人选中的为红色
            this.arr.subjects.forEach(function (cunt, index, data) {
              cunt.chooses.forEach(function (childenCunt, childenIndex, childenData) {
                if (childenCunt.select == true) {
                  _this.$set(childenCunt, 'oldSelect', true)
                }
              })
            })
            this.ALL_POINTS = JSON.parse(nowArr)[0].zongFen
            this.isLoading = false
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 点击返回
    back () {
      this.$router.history.go(-1)
    },
    // 点击完成
    send () {
      if (this.result === '' || this.result === undefined || this.result === null) {
        Toast('请填写评估结果')
        return false
      }
      this.answers = []
      var _this = this
      var isSelect = false
      this.arr.subjects.forEach(function (currentValue, index, arr) {
        if (currentValue.isSel === true) {
          // eslint-disable-next-line no-new-object
          var obj = new Object()
          if (currentValue.tupians !== undefined) {
            obj.SUBJECT_ID = currentValue.ID
            obj.tupians = currentValue.tupians
          }
          if (currentValue.desc !== undefined && currentValue.desc !== '') {
            obj.SUBJECT_ID = currentValue.ID
            obj.DESC = currentValue.desc
          }
          currentValue.chooses.forEach(function (choosesCurrent, choosesIndex, choosesArr) {
            if (choosesCurrent.select === true) {
              obj.SUBJECT_ID = currentValue.ID
              obj.CHOOSE_ID = choosesCurrent.ID
              obj.POINTS = choosesCurrent.POINTS
            }
          })
          _this.answers.push(obj)
          // console.log(_this.answers)
          isSelect = true
        }
      })
      if (isSelect === true) {
        // this.isPop = true
        // 把评语存在每个对应数据 的新属性 result里面
        this.$set(this.arr, 'result', this.result)
        this.$set(this.arr, 'ALL_POINTS', this.ALL_POINTS)
        // 结果展示
        this.tableShow = true
        this.tableList = this.arr
      } else {
        Toast('请至少选择一题作答')
      }
    },
    // 确认提交
    onConfirm () {
      this.getSubmit()
    },
    // 取消提交
    onCancel () {
      this.isPop = false
    },
    getSubmit () {
      // if (this.doctorsList.length > 0 && !this.select_doc_ID) {
      //   this.$toast('请选择复评医生')
      //   return false
      // }
      var FILES, DESC
      if (this.arr.FILES !== undefined && this.arr.FILES.length > 0) {
        FILES = this.arr.FILES
      } else {
        FILES = null
      }
      if (this.arr.DESC !== undefined && this.arr.DESC !== null) {
        DESC = this.arr.DESC
      } else {
        DESC = ''
      }
      this.$http.submit({
        'ASSESS_ID': this.arr.ID,
        'ASSESS_RESULT': this.result,
        'ALL_POINTS': this.ALL_POINTS,
        'TYPE': this.type,
        'FILES': FILES,
        'DESC': DESC,
        'ASSESS_SELF_TYPE': this.assessid,
        'PID': this.id,
        'ANSWERS': this.answers,
        sign_url: this.sign_url,
        assess_user_name: this.assess_user_name,
        'diagnose': this.firstArr.DIAGNOSE, // 初步诊断
        'assess_type': this.firstArr.ASSESS_TYPE, // 类别 （门诊、住院、居家）
        'ACCEPT_USER_ID': this.ACCEPT_USER_ID,
        team_id: this.team_id,
        assess_audit_index: this.listAll.length // 复评数量
      })
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.returnID = res.data.data
            this.tableShow = true
            this.$router.history.go(-1)
          } else {
            Toast('网络错误请重新提交')
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // // 展示的关闭
    tabResultLook () {
      this.tableShow = false
      this.writeShow = true
      // this.$router.history.go(-1)
    }
  }
}
</script>

<style scoped>
  ul, li {
    list-style: none;
  }
  .all{
    width: 100%;
    height: 100%;
    background: #FAF9FE;
    font-family: "PingFang SC";
  }
  .popHeader,
  header{
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    background: #FFFFFF;
    position: sticky;
    top: 0;
    border-bottom: 1px solid #e5e5e5;
  }
  .div{
    width: 33%;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: bold;
    font-family: "PingFang SC";
  }
  .div:nth-child(1) img{
    width: 7px;
    height: 13px;
    margin: 0 5px 0 15px;
  }
  .div:nth-child(2) {
    justify-content: center;
  }
  .div:nth-child(3) {
    justify-content: flex-end;
  }
  .div:nth-child(3) span{
    margin-right: 15px;
  }
  .side{
    color: #1da4f2;
  }
  .title{
    width: 92%;
    height: 75px;
    margin: 10px auto 5px auto;
    background: #FFFFFF;
    box-shadow: 0px -2px 30px 0px rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 10px;
    box-sizing: border-box;
  }
  .title p:nth-child(1) {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 10px;
  }
  .title p{
    display: flex;
    align-items: center;
  }
  .title button{
    height: 20px;
    border-radius: 10px;
    font-size: 11px;
    border: none;
    padding: 0 8px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    /*margin-right: 5px;*/
    border: 1px solid #1da4f2;
  }
  .title button:nth-child(1){
    color: #1da4f2;
    background: #FFFFFF;
  }
  .title .checkBtn{
    color: #FFFFFF;
    background: #1da4f2;
  }
  .title button img{
    width: 14px;
    height: 14px;
    margin-right: 5px;
  }
  .content{
    overflow: auto;
    padding: 5px 0;
    box-sizing: border-box;
  }
  .tabContent ul,
  .content ul{
    width: 92%;
    padding: 10px 10px 5px 10px;
    box-sizing: border-box;
    background: #FFFFFF;
    margin: auto auto 5px auto;
    border-radius: 10px;
  }
  .liHeader{
    width: 100%;
    font-size: 15px;
    display: flex;
    margin-bottom: 5px;
    justify-content: space-between;
  }
  .liHeader p:nth-child(1){
    width: 65%;
  }
  .liHeader p:nth-child(2){
    width: 120px;
    display: flex;
    align-items: flex-end;
  }
  .liHeader p{
    margin-bottom: 8px;
    /*background: #07c160;*/
  }
  .p_btn{
    display: flex;
    justify-content: flex-end;
  }
  .p_btn img{
    width: 18px;
    height: 18px;
  }
  .liHeader p button{
    height: 18px;
    border: 1px solid #1DA4F2;
    background: #FFFFFF;
    color: #1da4f2;
    border-radius: 10px;
    padding: 0 8px;
    box-sizing: border-box;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
  }
  .liChoos{
    font-size: 13px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
  }
  .selectBtn{
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-right: 5px;
  }
  .bottom{
    position: absolute;
    bottom: 0;
    width: 100%;
    /*height: 139px;*/
    /*background: #FFFFFF;*/
    box-shadow: 0px -2px 30px 0px rgba(0, 0, 0, 0.05);
    /*border-radius: 20px 20px 0px 0px;*/
    /*padding: 10px 0;*/
  }
  .bottom ul {
    width: 100%;
    /*margin: 5px auto;*/
    border-radius: 10px;
    /*overflow: hidden;*/
    display: flex;
    height: 130px;
  }
  /*.bottom ul:nth-child(1) {*/
  /*  height: 44px;*/
  /*}*/
  /*.bottom ul:nth-child(2) {*/
  /*  height: 65px;*/
  /*}*/
  .bottom ul li{
    display: flex;
    height: 100%;
    align-items: center;
    background: #FFFFFF;
  }
  .bottom ul li:nth-child(1){
    width: 30%;
    padding: 0 10px;
    box-sizing: border-box;
    color: #1da4f2;
    background: #E8F6FE;
    justify-content: center;
    border-radius: 10px 0 0px 10px;
    font-size: 15px;
  }
  .bottom ul li:nth-child(2){
    width: 70%;
    padding: 0 10px;
    box-sizing: border-box;
    border:1px solid rgba(29, 164, 242, 0.1);
    border-radius: 0 10px 10px 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    font-size: 13px;
  }
  .bottom ul li textarea{
    width: 100%;
    resize: none;
    height: 80%;
    margin-bottom: 5px;
    border: none;
  }
  .bottom ul li p{
    width: 100%;
    font-size: 11px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
    text-align: right;
  }
  .pop li{
    height: 75px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
    border-bottom: 1px solid #E5E5E5;
  }
  .pop_img{
    height: 100%;
    display: flex;
    /*align-items: center;*/
  }
  .pop li img{
    width: 18px;
    height: 18px;
    margin-right: 8px;
    margin-top: 40%;
  }
  .popLi{
    width: 100%;
    height: 90%;
    font-family: PingFang SC;
    font-weight: 500;
    display: flex;
    flex-direction: column;
  }
  .popLi_top{
    justify-content: space-between;
  }
  .popLi_top,
  .popLi_bottom{
    width: 100%;
    height: 50%;
    display: flex;
    align-items: center;
  }
  .tag{
    width: 18px;
    height: 18px;
    font-size: 11px;
    border-radius: 2px;
    margin-left: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .popTime{
    font-size: 11px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
  }
  .popName{
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
  }
  .pop li span{
    /*width: 40%;*/
  }
  .pop li div{
    /*font-size: 11px;*/
    /*font-family: PingFang SC;*/
    /*font-weight: 500;*/
    /*color: #999999;*/
  }
  .dian{
    width: 5px;
    height: 5px;
    border-radius: 50%;
    margin-right: 5px;
  }
  .dian1{
    background: #E3170D;
  }
  .dian2{
    background: rgba(46, 196, 155, 1);
  }
  .jiaoBiao{
    width: 75px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .jiaoBiao1{
    color: #E3170D;
  }
  .jiaoBiao2{
    color: rgba(46, 196, 155, 1);
  }
  /*  资料上传*/
  .zlTitle{
    width: 100%;
    font-size: 15px;
    background: #fff;
  }
  .textareaDiv{
    width: 95%;
    height: 150px;
    background: #FAF9FE;
    border-radius: 10px;
    margin: 0 auto;
    overflow: hidden;
  }
  .textareaDiv textarea{
    resize: none;
    width: 100%;
    height: 80%;
    overflow: auto;
    background: transparent;
    border: none;
    padding: 10px;
    box-sizing: border-box;
  }
  .shuoming{
    font-size: 13px;
    color: #999999;
    display: flex;
    flex-direction: row-reverse;
    margin-right: 10px;
    margin-bottom: 5px;
  }
  .label{
    width: 100%;
    height: 44px;
    background: #fff;
    display: flex;
    align-items: center;
    font-size: 15px;
  }
  .zlMenu,
  .videoMenu,
  .imgMenu{
    width: 100%;
    height: 44px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    font-size: 15px;
  }
  .zlMenu a,
  .videoMenu_left a,
  .imgMenu a,
  .hengGang
  {
    width: 2px;
    height: 15px;
    background: #1da4f2;
    margin: 0 5px 0 15px;
    display: block;
  }
  .videoMenu,
  .imgMenu
  {
    justify-content: space-between;
    /*margin-top: 5px;*/
  }
  .videoMenu li:last-child,
  .imgMenu li:last-child
  {
    margin-right: 15px;
    color: #999999;
  }
  .videoMenu_left,
  .imgMenu_left
  {
    width: 50%;
    display: flex;
    align-items: center;
  }
  .videoMenu_left a,
  .imgMenu a
  {
    display: block;
  }
  .videoUpload{
    width: 100%;
    background: #FFFFFF;
    padding: 0 10px;
    box-sizing: border-box;
  }
  .zlMenu{
    display: flex;
    justify-content: space-between;
  }
  .zlMenu div{
    display: flex;
    align-items: center;
  }
  .zlMenu div:nth-child(2) img{
    width: 13px;
    height: 7px;
    margin-right: 15px;
  }
  /*针对项目弹窗*/
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  .block {
    width: 90%;
    height: 200px;
    border-radius: 10px;
    background-color: #fff;
  }
  .block .pHeader{
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #E5E5E5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-family: PingFang SC;
    font-weight: bold;
  }
  .block ul{
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
  }
  .block ul li{
    padding: 10px;
    border-bottom: 1px solid #E5E5E5;
    box-sizing: border-box;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    display: flex;
    align-items: center;
  }
  .yuan{
    display: block;
    width: 10px;
    min-width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #1da4f2;
    margin-right: 10px;
  }
  .tabTop{
    position: sticky;
    top: 0;
    z-index: 999;
    background: white;
  }
  .tabHeader{
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #E5E5E5;
    font-family: "PingFang SC";
    font-size: 15px;
    font-weight: bold;
  }
  .tabHeader div{
    width: 33%;
    display: flex;
  }
  .tabHeader div:nth-child(2){
    justify-content: center;
  }
  .tabHeader div:last-child{
    justify-content: flex-end;
    padding-right: 10px;
    box-sizing: border-box;
  }
  .solt{
    color: #1DA4F2;
  }
  .tabTitle{
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
justify-content: center;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    padding: 0 15px;
    box-sizing: border-box;
  }
  table{
    border: 1px solid #E5E5E5;
  }
  table th, td{
    font-size: 13px;
    padding: 10px 5px;
    box-sizing: border-box;
    border-left: 1px solid #E5E5E5;
    text-align: center;
  }
  td{
    border-bottom: 1px solid #E5E5E5;
  }
  table th, td:nth-child(1) {
    width: 15%;
  }
  table th, td:nth-child(2) {
    width: 35%;
  }
  table th, td:nth-child(3) {
    width: 35%;
  }
  table th, td:nth-child(4) {
    width: 15%;
  }
  /deep/ .van-uploader__input{
    border: 1px solid #E5E5E5;
  }
  .backFFF{
    background: #fff!important;
  }
  .writeDiv{
    width: 90%;
    background: #E5E5E5;
    margin: 0px auto;
    background: #FAF9FE;
    border: 1px solid #999999;
    border-radius: 5px;
    overflow: hidden;
  }
  .writeButton{
    width: 90%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 5%;
    position: absolute;
    bottom: 0;
  }
  .writeButton button{
    width: 49%;
    height: 44px;
    background: #FFFFFF;
    border: 1px solid #1DA4F2;
    border-radius: 5px;
    font-size: 17px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #1da4f2;

  }
  .backBlue{
    color: #FFFFFF !important;
    background: linear-gradient(90deg, #1DA3F2, #1DC7F2)!important;
  }

  .tab{
    background: #FAF9FE;
  }
  .tabHeader{
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #E5E5E5;
    font-family: "PingFang SC";
    font-size: 15px;
    font-weight: bold;
    background: #FFFFFF;
    position: sticky;
    top: 0;
  }
  .tabHeader div{
    display: flex;
  }
  .tabHeader div:nth-child(1),
  .tabHeader div:nth-child(3){
    width: 25%;
  }
  .tabHeader div:nth-child(2){
    width: 50%;
    justify-content: center;
  }
  .tabHeader div:last-child{
    justify-content: flex-end;
    padding-right: 10px;
    box-sizing: border-box;
  }
  .solt{
    color: #1DA4F2;
  }
  .tabTitle{
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
    padding: 0 15px;
    box-sizing: border-box;
    background: #FFFFFF;
  }
  .tabPerson{
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    background: #fff;
  }
  .tabName{
    height: 30px!important;
    font-size: 15px !important;
    font-weight: bold !important;
  }
  .tabTextarea{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 0;
    box-sizing: border-box;
  }
  .tabTextarea textarea{
    width: 95%;
    height: 75px;
    background: #FFFFFF;
    border: 1px solid #999999;
    border-radius: 5px;
    resize: none;
    padding: 10px;
    box-sizing: border-box;
    overflow: auto;
  }
  .tabPerson p{
    height: 30px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    box-sizing: border-box;
  }
  .tabPerson p span{
    margin-right: 20px;
  }
  .popDiv{
    background: #FAF9FE;
  }
  .box{
    padding: 10px;
    box-sizing: border-box;
    background: white;
    margin-bottom: 8px;
    display: flex;
  }
  .all .box:last-of-type{
    margin-bottom: 60px;
  }
  .PHOTO{
    width: 55px;
    height: 55px;
    border-radius: 50%;
    object-fit: cover;
  }
  .box_left{
    width: 23%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
  }
  .dict_name{
    font-size: 11px;
    border: 1px solid #1DA4F2;
    border-radius: 2px;
    background: rgba(16, 184, 246, 0.1);
    color: #1da4f2;
    padding: 1px 3px;
    box-sizing: border-box;
    white-space: nowrap;
    /*margin-top: 10px;*/
  }
  .box_right{
    width: 78%;
  }
  .box_right ul{
    /*height: 60px;*/
    display: flex;
    flex-direction: column;
    align-content: space-around;
    justify-content: space-around;
  }
  .box_right ul li{
    display: flex;
    align-items: center;
    font-size: 13px;
    font-family: PingFang SC;
    min-height: 25px;
  }
  .box_right ul li:nth-child(1){
    justify-content: space-between;
  }
  .name{
    font-size: 15px!important;
    font-weight: bold;
    color: #333333;
  }
  .biaoqian{
    /*padding: 0px 8px;*/
    min-width: 44px;
    height: 18px;
    border-radius: 15px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /* background: rgba(29, 164, 242, 0.1); */
    background: transparent;
    color: #1DA4F2;
    /* border: none; */
    border: 1px solid;
    font-size: 11px;
    margin-left: 8px;
  }
  .btnXiangQing{
    color: white;
    background: #1DA4F2;
    border: none;
    padding: 3px 8px;
    border-radius: 2px;
    box-sizing: border-box;
    font-size: 11px;
  }
  .btnXiangQing img{
    width: 5px;
    height: 9px;
    margin-left: 5px;
  }

  .btnXiangQing,
  .biaoqian,
  .jieShao
  {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .jieShao{
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    margin-right: 8px;
  }
  .box_rigth_bottom{
    margin-top: 5px;
  }
  .box_rigth_bottom p{
    margin-bottom: 5px;
  }
  .box_rigth_bottom p:nth-child(1),
  .box_rigth_bottom p:nth-child(3){
    font-size: 13px;
  }
  .box_rigth_bottom p a{
  }
  .box_rigth_bottom p span{
    color: #E3170D;
    margin: 0 8px 0 3px;
  }
  .goodAt{
    font-size: 13px;
    display: flex;
  }
  .goodAt a{
    display: block;
    white-space: nowrap;
  }
  .goodAt span{
    /*width: 80%;*/
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #333 !important;
  }
  .selectDoctor{
    background: rgba(29, 164, 242, 0.1) !important;
  }
</style>
